<template>
  <k-form-modal
    v-model="state.visible"
    drawer
    width="900px"
    :loading="state.loading"
    title="推荐品类"
    label-width="80px"
    :model="state.model"
    :rules="state.rules"
    @submit="methods.onSubmit"
    @cancel="methods.onCancel"
  >
    <el-form-item label="年份" prop="year">
      <el-select v-model="state.model.year" placeholder="请选择跟年份">
        <el-option v-for="item in yearTypeDrawerOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="月份" prop="month">
      <el-select v-model="state.model.month" placeholder="请选择月份">
        <el-option v-for="item in monthTypeDrawerOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="商品链接" prop="url">
      <el-input v-model="state.model.url" placeholder="请输入考古加商品链接" />
    </el-form-item>
    <el-form-item label="商品品类" prop="category">
      <el-input v-model="state.model.category" placeholder="请输入商品品类" maxlength="6" show-word-limit />
    </el-form-item>
    <el-form-item label="售价" prop="price">
      <el-input v-model="state.model.price" placeholder="请输入最低价" />
    </el-form-item>
    <el-form-item label="周期销量" prop="sales">
      <el-input v-model="state.model.sales" placeholder="请输入模糊商品销量；例如：150万+" />
    </el-form-item>
    <el-form-item label="选品理由" prop="sale_points">
      <div class="m-flex">
        <el-input v-model="state.model.sale_points[0]" placeholder="请输入选品理由" maxlength="6" show-word-limit />
        <el-input v-model="state.model.sale_points[1]" placeholder="请输入选品理由" maxlength="6" show-word-limit class="m-ml-12" />
        <el-input v-model="state.model.sale_points[2]" placeholder="请输入选品理由" maxlength="6" show-word-limit class="m-ml-12" />
      </div>
    </el-form-item>
    <el-form-item prop="goods" label-width="0">
      <div class="goods-title-box">
        <h6 class="goods-title-name">推荐爆款商品</h6>
        <div class="goods-title-handle">
          <el-link type="primary" @click="addGoods">添加</el-link>
          <el-link class="m-ml-16" @click="keyVisible = true">一键删除</el-link>
        </div>
      </div>
      <div class="goods-wrap">
        <div v-if="state.model.goods.length" class="goods-box">
          <div v-for="(item, index) in state.model.goods" :key="index" class="goods-item">
            <div class="goods-cover-box" @click="openUrl(item.qr_code)">
              <img :src="item.cover" class="goods-img" />
              <p class="goods-status" :class="'status' + item.status">{{ statusTxtMap[item.status] }}</p>
            </div>
            <p class="goods-title m-ellipsis--2" @click="openUrl(item.url)">{{ item.title }}</p>
            <div class="commission-box">
              <p class="commission-txt">咕咕高佣</p>
              <p class="commission-num">{{ item.high_ratio }}%</p>
            </div>
            <el-link type="danger" @click.stop="onClickDel(index)">删除</el-link>
          </div>
        </div>
        <p v-else class="add-goods">请添加商品</p>
      </div>
    </el-form-item>
  </k-form-modal>
  <KDialog v-model="goodsVisible" width="small" title="添加商品" @cancel="goodsVisible = false" @submit="onClickSubmit">
    <el-input v-model="textarea" :rows="6" type="textarea" placeholder="请输入商品链接" />
  </KDialog>
  <KDialog v-model="keyVisible" width="small" title="是否一键删除" @submit="keyClear">
    <el-radio-group v-model="clearStatus">
      <el-radio v-for="item in clearStatusOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
    </el-radio-group>
  </KDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { formatPriceCent, toolGetDataPageRangeShortCuts as rangeShortcuts, toolGetCountInitDateRange } from '@/utils';
import { useFormModal, useDel } from '@crud/index';
import { investCalendarDetail, investCalendarUpsert, investCalendarUrlParse } from '@/api/crm-kgj/calendar';
import { yearTypeDrawerOptions, monthTypeDrawerOptions } from './../hooks/use-table';
import { KDialog } from '@/components/k-dialog';

const formRef = ref();
const emits = defineEmits(['after-submit']);

// 商品状态1-上架中 2-已下架 3-已终止 6-已到期
const statusTxtMap: any = ref({
  1: '上架中',
  2: '已下架',
  3: '已终止',
  6: '已到期'
});

const clearStatusOptions = [
  { label: '已下架', value: 2 },
  { label: '已终止', value: 3 },
  { label: '已到期', value: 6 }
];

// 添加商品
const goodsVisible = ref(false);
const textarea = ref('');
const addGoods = () => {
  goodsVisible.value = true;
};

// 解析商品
const onClickSubmit = () => {
  if (!textarea.value) {
    ElMessage.error('请输入商品链接');
    return;
  }
  investCalendarUrlParse({
    product_url: textarea.value
  }).then((res) => {
    textarea.value='';
    goodsVisible.value = false;
    ElMessage.success('商品解析成功');
    state.model.goods?.unshift(res.data);
  });
};

//  跳转考古加
const openUrl = (url: string) => {
  window.open(url, '_blank');
};

// 一键删除
const clearStatus = ref(2);
const keyVisible = ref();
const keyClear = () => {
  keyVisible.value = false;
  state.model.goods=state.model.goods.filter((item: any) => {
    return item.status != clearStatus.value;
  });
};

// 删除商品
const { onClickDel } = useDel({
  confirm: { title: '删除商品', confirmButtonText: '确定', message: '是否删除该商品?' },
  del: (data: any) => {
    state.model.goods.splice(data, 1);
  }
});

const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  formRef,
  model: {
    id: undefined,
    year: '',
    month: '',
    url: '',
    category: '',
    price: '',
    sales: '',
    sale_points: [],
    goods: []
  },

  rules: {
    year: [{ required: true, message: '请选择跟年份' }],
    month: [{ required: true, message: '请选择月份' }],
    url: [{ required: true, message: '请输入商品链接' }],
    category: [{ required: true, message: '请输入商品品类' }],
    price: [{ required: true, message: '请输入售价' }],
    sales: [{ required: true, message: '请输入周期销量' }],
    sale_points: [{ required: true, message: '请输入选品理由' }],
    goods: [{ required: true, message: '请添加商品' }]
  },
  getParams: (model: any) => model,

  onShow: (mode = 0, data: any) => {
    mode === 1 &&
      investCalendarDetail({ id: data.id }).then((res) => {
        let data=res?.data;
        data.price=formatPriceCent(data.price, false);
        state.model = { ...res?.data };
      });
  },

  onSubmit: async (model: any, mode = 0) => {
    model.price=model.price*100; // 转化为分
    const res = await investCalendarUpsert(model);
    if (!res.err) {
      ElMessage.success(mode === 1 ? '编辑成功' : '创建成功');
      emits('after-submit');
    }
    return res;
  }
});

defineExpose({
  show: methods.show
});
</script>

<style lang="scss" scoped>
.goods-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 26px;
  padding-bottom: 12px;
  .goods-title-name {
    font-weight: 500;
    font-size: 18px;
    color: #303133;
  }
}
.goods-wrap {
  padding: 12px;
  background-color: #f5f7fa;
  min-height: 200px;
  width: 100%;
  .goods-box {
    .goods-item {
      display: flex;
      align-items: center;
      background-color: #fff;
      height: 72px;
      border-radius: 4px;
      padding: 0 16px;
      .goods-cover-box {
        position: relative;
        width: 48px;
        height: 48px;
        .goods-img {
          width: 100%;
          height: 100%;
        }
        .goods-status {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          line-height: 18px;
          text-align: center;
          font-weight: 400;
          font-size: 12px;
          color: #909399;
          background-color: #e6e8eb;
          &.status1 {
            color: #fff;
            background-color: #f56c6c;
          }
        }
      }
      .goods-title {
        flex: 1;
        margin: 0 16px 0 8px;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #303133;
        &:hover{
          cursor: pointer;
          color:#4975e9;
        }
      }
      .commission-box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 111px;
        .commission-txt {
          font-weight: 400;
          font-size: 14px;
          line-height: 24px;
          color: #303133;
          padding-bottom: 4px;
        }
        .commission-num {
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: #606266;
        }
      }
    }
  }
  .add-goods {
    line-height: 200px;
    text-align: center;
    font-weight: 400;
    color: #a8abb2;
  }
}
</style>
